\chapter{Друга верзија апликације}
Имајући у виду мане претходне апликације, могуће преправке и напредак у области клијентских веб технологија настала је нова верзија. При имплементацији потребних функционалности и дизајну корисничког интерфејса коришћене су технологије описане у претходним поглављима. Ово поглавље ће се сконцентрисати на опису свих функционалности новије верзије. Затим ће бити наведени кључни делови програмског кода којима су имплементиране неке од поменутих функционалности.

Као подсетник биће наведене функционалности претходне верзије апликације:
\begin{itemize}
\item Претрага по наслову, имену аутора, години издања, месту издања, инвентарном броју и универзалној децималној класификацији,
\item Сортирање добијених резултата,
\item Листање по страницама добијених резултата,
\item Одабир броја приказаних резултата жељене претраге.
\end{itemize}

На основу наведених функционалности јасно је да је апликацији могао приступати корисник без посебних привилегија. Како апликација није вршила измену стања базе података из које су се подаци допремали, није било потребе вршити аутентификацију и ауторизацију.

Нова верзија апликације такође нема проверу привилегија корисника. Пуна верзија нуди могућност додавања, измене и брисања постојећих података у бази података. Она је намењена библиотекарима за коришћење на рачунарима којима ће бити ограничен приступ. Верзија којој ће обични корисници моћи да приђу поред функционалности претходне верзије имаће:
\begin{itemize}
\item Локализацију којом се даје могућност одабира латиничног или ћириличног писма.
\end{itemize}

Функционалности које ће бити сакривене од обичног корисника су:
\begin{itemize}
\item Додавање података нових књига при чему ће се валидирати подаци који се уносе,
\item Измена постојећих података о књигама,
\item Брисање постојећих података о књигама.
\end{itemize}

Увођење аутентификације и ауторизације корисника би захтевало изучавање и имплементацију низа других технологија чиме би се превазишле границе овог рада. 

У наставку ће графички бити приказани екрани пуне верзије апликације са потребним објашњењима.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/biblio02_main.png}
	\caption{Изглед нове верзије Библио апликације.}
	\label{fig:biblio02}
\end{figure}

Упоређујући приказ прве верзије апликације на Слици \ref{fig:biblio01_adv_search} и нове верзије на Слици \ref{fig:biblio02} може се уочити напредак у технологијама које се користе за уређивање корисничког интерфејса.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/biblio02_search_page.png}
	\caption{Приказ резултата једне претраге.}
	\label{fig:biblio02_search_page}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/biblio02_localization.png}
	\caption{Приказ локализације на ћирилично писмо.}
	\label{fig:biblio02_localization}
\end{figure}

Оно што је битно напоменути је да изабрано писмо корисника прати кроз све екране апликације. Примера ради одабиром ћириличног писма, форме за додавање и измену постојећих података о књигама ће такође бити исписане ћирилицом.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/biblio02_adding_validation.png}
	\caption{Валидација при уносу података о новој књизи. Приметити начин на који форма обавештава корисника о невалидним подацима.}
	\label{fig:biblio02_adding_validation}
\end{figure}

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.4]{slike/biblio02_change.png}
	\caption{Форма за измену постојећих података.}
	\label{fig:biblio02_change}
\end{figure}

\subsection{Кључни делови имплементације}

Ово поглавље ће представити наинтересантније делове програмског кода и покушати да што боље објасни концепте и разлоге због којих су одређени механизми коришћени. Иако је већина механизама коришћена за врло тривијалне ствари њихова права вредност лежи у комплекснијим сценаријима употребе о којима овде неће бити речи.

\subsubsection{Рутирање у апликацији}

Рутирање је механизам који \texttt{AngularJS} платформа уводи из више разлога. Највидљивији разлог је сакривање унутрашње организације веб апликације од корисника. Некада су се URL адресе страница веб сајта завршавале са именом HTML фајла и његовом екстензијом. Слична ситуација је и са веб страницама екстензије PHP. Начин на који се унутрашња структура веб сајта или апликације могу сакрити од корисника је коришћење посебних модула на страни веб сервера. Међутим, шта радити када се користе веб апликације које не захтевају извршавање на серверу? Једно од решења је \texttt{AngularJS} рутирање. Пример рутирања у апликацији приказан је на следећем Листингу \ref{code:routing}.

\lstinputlisting[label=code:routing,language=HTML5,caption=Рутирање у апликацији]{primeri_koda/biblio/app.js}

Приказано рутирање у апликацији омогућава да уношењем URL адресе облика:
\begin{verbatim}
http://biblio.test/#/add 
\end{verbatim}
бива приказана страница {\it add.html} за додавање података нове књиге. Уколико се жели приступити некој од неомогућених рута апликација ће аутоматски извршити редирекцију на почетну страницу и тако приказати садржај {\it main.html} странице.

Поред одређивања која ће се HTML страница приказати, рутирање говори и о контролеру који ће се учитати и извршити пре него што се прикаже страница. Директиве на страници ће свој садржај исцртати према садржају променљивих у контексту, чији је садржај дефинисан у контролеру.

Једна од напреднијих могућности рутирања је увођење међу корака, пре извршавања кода контролера и приказивања странице, а после корисничког клика на линк који води ка жељеној страници.

\subsubsection{Локализација апликације}

Локализација апликација представља тренд који овој апликацији није неопходан али је одличан пример могућности коришћених технологија. Она представља прилагођавање корисничког интерфејса поднебљу на ком се користи. Имајући у виду коришћење латиничног и ћириличног писма у нашој земљи, ова апликација даје могућност исписа корисничког интерфејса у једном од ова два понуђена писма.

Имплементација локализације у функцији је спроведена коришћењем \texttt{AngularJS} филтера. Пример коришћења филтера као директиве дат је на Листингу \ref{code:filter1}.

\lstinputlisting[label=code:filter1,language=HTML5,caption=Коришћење филтера у коду]{primeri_koda/biblio/main.html}

На основу имена филтера, који је у приказаном примеру {\it translate}, платформа учитава дефиницију филтера и позива га као функцију. На основу вредности аргумента који се предаје, филтер враћа вредност која се исписује. У приказаном примеру аргумент који се предаје филтеру је низ карактера {\it 'listing.books'}. Најосновнија имплементација филтера би садржала асоцијативни низ, при чему би кључеви били у облику поменутог низа карактера. Њихове вредности би могле бити исписане различитим писмима, на различитим језицима што би било одређено изабраном локализацијом. Како је позив филтера ограничен на позив његове директиве из HTML кода, у апликацији је уведен сервис за локализацију који практично преузима превођење. Филтер тада само позива сервис и прослеђује му кључ по ком ће сервис пронаћи и вратити локализовану верзију. Имплементација сервиса за локализацију је приказана на Листингу \ref{code:localization}.

\lstinputlisting[label=code:localization,language=HTML5,caption=Приказ сервиса за локализацију]{primeri_koda/biblio/Localization.js}

Инстанцирање сервиса у тренутку када је први пут потребан, и његово постојање за све време коришћења апликације представљају погодност која је искоришћена у меморисању изабране локализације. На овај начин апликација ће кроз стање сервиса знати која је локализација тренутно активна. Тако је омогућено да изабрана локализација буде видљива на свим страницама апликације. Вредност променљиве на основу које се одређује изабрана локализација служи и као кључ за добијање свих порука које су јој прилагођене.

\subsubsection{Претрага према подацима постојећих књига}

Основна функционалност нове апликације је претрага књига на основу поменутих параметара. Механизам који је омогућио слање захтева серверу у старој верзији је такође коришћен у новој. AJAX позиви су у \texttt{AngularJS} платформи апстраковани, па се уместо {\it \$.ajax} или {\it \$.getJSON} позива предефинисани сервис {\it \$http}. На Листингу \ref{code:search} се може видети пример коришћења овог сервиса у слању захтева приликом претраге базе података.

\lstinputlisting[label=code:search,language=HTML5,caption=Сервис претраге књига]{primeri_koda/biblio/Listing.js}

Из приложеног кода се може уочити начин на који се формира скуп параметара који се шаљу серверу, адреса сервера и име PHP скрипте која након претраге по бази података враћа резултат. Асинхроност извршења претраге књига је кључна особина и стога се користе две функције {\it succes} и {\it error}, које бивају позване у случају успешног пристизања резултата или грешке у комуникацији, респективно. Интересантно је истаћи посебан параметар {\it cached} при коришћењу {\it \$http} сервиса, који даје могућност памћења добијених резултата. У неким случајевима се укључивањем кеширања у многоме убрзава рад апликације и смањује број захтева упућених серверу.

\subsubsection{Додавање података о новим књигама}

Разлог разматрања функционалности додавања података о новој књизи је механизам валидације поља форме који је имплементиран у \texttt{AngularJS}-у. Оплемењивање HTML кода \texttt{AngularJS} врши увођењем својих директива. Валидација форме је још један од примера како \texttt{AngularJS} директиве могу користити у имплементирању HTML форми. HTML верзије 5 уводи посебан атрибуте форме под именом {\it novalidate} који је приликом коришћења \texttt{AngularJS}-ових директива позван како би се онеспособила валидација на нивоу HTML-a, и омогућило да \texttt{AngularJS} преузме улогу валидатора. Форми је подешена вредност атрибута {\it name} преко којег ће се \texttt{AngularJS} референцирати на поља унутар ње и вршити валидацију. Кључни делови HTML кода који представља страницу за додавање подтака о новим књигама приказан је на Листингу \ref{code:adding_html}.

\lstinputlisting[label=code:adding_html,language=HTML5,caption=Приказ кључних делова форме за додавање податак о новим књигама]{primeri_koda/biblio/add.html}

На приказаном примеру поља за унос универзалног децималног класификатора, наслова и године издања између осталих атрибута и \texttt{AngularJS} директива користе:
\begin{itemize}
\item required
\item ng-patern,
\item ng-maxlength,
\item ng-minlength и
\item ng-change.
\end{itemize}

Функција наведених директива је интуитивна и оне знатно убрзавају имплементацију валидације поља форме. Уколико је потребна сложенија провера унетих података може се користити {\it ng-change} директива, као што је наведено у приложеном примеру.

У наставку примера се налази код којим се кориснику помаже приликом уноса. Свака грешка у уносу ће одређено поље обојити у црвену боју и тако назначити кориснику да је погрешио при уносу. Директива {\it ng-class} је коришћена да уколико је погрешна вредност поља текст обоји у црвено. Пошто свако поље захтева текст или број, коришћена је вредност варијабле {\it pristine} везана за поље уноса. На овај начин је избегнуто бојење свих поља у црвену боју приликом пристизања на страницу за додавање.

Поменута директива {\it ng-change} је у апликацији коришћена како би се имплементирала валидација података о години издања књиге. Како је потребно онемогућити унос броја године који је већи од броја текуће, позвана је функција {\it validateChosenYear} која преузима улогу валидатора. Њена имплементација је приказана на Листингу \ref{code:validate}.

\lstinputlisting[label=code:validate,language=HTML5,caption=Додатна валидација поља форме]{primeri_koda/biblio/add.js}

Споменута функција испитује вредности унешене године и извештава \texttt{AngularJS} валидности поља. Овиме су приказани сви важни начини валидације поља форме. Начин на који се врши валидација поља приликом промена постојећих података о књигама је иста као и овде наведена.